var app = new Vue({
  el: '#app',
  data () {
    return {
      dialogShow: false, // 弹框显示
      otherMarket: false, // 弹框其它超市显示
      cartShow: false, // 弹框购物车显示
      searchValue: '', // 搜索框关键字
      goodslist: null, // 商品列表数据
      marketlist: null, // 其它超市数据
      spreadRate: '', // 价差率
      num: 1, // 购物车弹框商品数量
      curIndex: 0, // 当前下标
      errMsg: '', // Toast提示框提示文字
      name: '', // 其它超市商品名
      currentPage: -1, // 当前页数
      totalPage: 2, // 总页数
      pageSize: 8, // 每页显示条数
      loading: false,
      showHistory: true, // 搜索历史记录是否展示
      historylist: null
    }
  },
  watch: {
    // Toast提示框1秒后消失
    errMsg: function (newerrMsg, olderrMsg) {
      setTimeout(function() {
        app.errMsg = ''
      }, 1000);
    }
  },
  created () {
    this.showSearchHistory()
  },
  methods: {
    // 返回
    goback () {
        window.history.go(-1)
    },
    // 搜索按钮
    submit () {
      this.showHistory = false
      if (this.searchValue!=="") {
        let searchHistory = []
        let $Storage = JSON.parse(localStorage.getItem("search-History"))
        if (!$Storage) {
          searchHistory.push(this.searchValue)
          localStorage.setItem("search-History",JSON.stringify(searchHistory))
        } else {
          if ($Storage.indexOf(String(this.searchValue))===-1&&$Storage.length<8) {
            $Storage.push(this.searchValue)
            localStorage.setItem("search-History",JSON.stringify($Storage))
          } else if ($Storage.indexOf(String(this.searchValue))===-1&&$Storage.length==8) {
            $Storage.splice(0,1)
            $Storage.push(this.searchValue)
            localStorage.setItem("search-History",JSON.stringify($Storage))
          }
        }
      }
      this.loading = true
      this.currentPage = 1
      this.goodslist = null
      this.searchData()
    },
    loadMore () {// 滚动加载更多商品
        this.currentPage ++
        if(this.currentPage > this.totalPage || this.currentPage == 0){
          this.loading = true
          console.log(this.loading)
            return false
        }
        this.searchData()
    },
    // 获取商品数据
    searchData () {
      if (this.searchValue!=="") {
        Axios.post('/goods/goods/searchgoodsList.do', {
          fullName: this.searchValue,
          currentPage: this.currentPage
        }).then(res => {
          if (res.respCode === "S") {
            console.log(this.currentPage)
            let list = res.data.data
            list.forEach(goods => {
              goods.minPrice = goods.minPrice / 100
            });
            if (this.currentPage == 1) {
              this.goodslist = list
            } else {
              this.goodslist = this.goodslist.concat(list)
            }
            this.totalPage = res.data.totalPage
            this.currentPage = res.data.currentPage

            if (this.currentPage < this.totalPage) {
              this.loading = false
            }
            this.$nextTick(() => {
              let h3 = document.querySelector('.list').querySelectorAll('h3')
              let p = document.querySelector('.list').querySelectorAll('p')
              if (this.currentPage == 1) {
                var i = 0
              } else {
                i = (this.currentPage - 1) * this.pageSize
              }
              for (let j = i; j < h3.length; j++) {
                if (h3[j].getBoundingClientRect().height > 21) {
                  p[j].style.bottom = "10vw"
                }
              }
            })
          } else {
            this.goodslist = []
          }
        }).catch(err => {
          console.error(err)
        })
      } else {
        Axios.post('/goods/goods/searchgoodsList.do', {
          fullName: " ",
          currentPage: this.currentPage
        }).then(res => {
          if (res.respCode === "S") {
            console.log(this.currentPage)
            let list = res.data.data
            list.forEach(goods => {
              goods.minPrice = goods.minPrice / 100
            });
            if (this.currentPage == 1) {
              this.goodslist = list
            } else {
              this.goodslist = this.goodslist.concat(list)
            }
            this.totalPage = res.data.totalPage
            this.currentPage = res.data.currentPage

            if (this.currentPage < this.totalPage) {
              this.loading = false
            }
            this.$nextTick(() => {
              let h3 = document.querySelector('.list').querySelectorAll('h3')
              let p = document.querySelector('.list').querySelectorAll('p')
              if (this.currentPage == 1) {
                var i = 0
              } else {
                i = (this.currentPage - 1) * this.pageSize
              }
              for (let j = i; j < h3.length; j++) {
                if (h3[j].getBoundingClientRect().height > 21) {
                  p[j].style.bottom = "10vw"
                }
              }
            })
          } else {
            this.goodslist = []
          }
        }).catch(err => {
          console.error(err)
        })
      }
    },
    // 其它超市按钮
    otherPrice (index) {
      this.name = this.goodslist[index].fullName
      Axios.post('/goods/goods/supermarketPriceList.do', {
        goodsSkuId: this.goodslist[index].goodsSkuId
      }).then(res => {
        let list = res.data.supermarketGoodsList
        list.forEach(goods => {
          if (goods.price == -1) {
            goods.price = "暂无价格"
          } else {
            goods.price = goods.price / 100 + "元"
          }
        });
        this.spreadRate = res.data.spreadRate
        this.marketlist = list
        this.dialogShow = true
        this.otherMarket = true
			}).catch(err => {
        console.error(err)
      })
    },
    // 加入购物车按钮
    cartdialogShow (index) {
      this.dialogShow = true
      this.cartShow = true
      this.curIndex = index
    },
    // 取消按钮
    btnCancel () {
      this.dialogShow = false
      this.otherMarket = false
      this.cartShow = false
    },
    // 加号按钮
    btnPlus () {
      if (this.num < 99) {
        this.num = this.num + 1
      }
    },
    btnReduce () { // 减号按钮
      if (this.num > 1) {
        this.num = this.num - 1
      }
    },
    // 加入购物车确定按钮
    btnOk () {
      Axios.post('/goods/shopCar/addShopCar.do', {
        goodsSkuId: this.goodslist[this.curIndex].goodsSkuId,
        quantity: this.num
      }).then(res => {
        this.errMsg = "您已提交成功<br/>请到购物车查看"
      }).catch(err => {
        console.error(err)
      })
      this.dialogShow = false
      this.cartShow = false
      this.num = 1
    },
    // 搜索历史记录展示
    showSearchHistory () {
      let historylist = JSON.parse(localStorage.getItem('search-History'))
      if (historylist) {
        historylist = historylist.reverse()
        this.historylist = historylist
      }
    },
    // 删除搜索历史记录
    delHistory () {
      this.historylist = null
      localStorage.removeItem('search-History');
    },
    // 点击历史记录
    changeSearchValue (index) {
      this.searchValue = this.historylist[index]
      this.showHistory = false
      this.loading = true
      this.currentPage = 1
      this.goodslist = []
      this.searchData()
    }
  }
})
